<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I-F Helper</title>
<style type="text/css">
body { background-color:#eeffee }
*, input { font-size: 12px; font-family: 'courier new'; line-height:1.2 }
textarea { font-size: 12px; font-family: 'courier new' }
form { padding:0px; margin:0px }

/** textAreaWithLines **/
.textAreaWithLines{
  font-family:courier;      
  border:1px solid #ccc;
  
}
.textAreaWithLines textarea,.textAreaWithLines div{
  border:0px;
  line-height:120%;
  font-size:12px;
}

.textAreaWithLines .lineObj {
  border-right:1px #ccc solid;
  padding-right:2px;
  background-color:#eee;
}
</style>
<j:placeholder/>
<h:loader lib="if,jquery"/>
<script language="javascript">
	//code from http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506
   var lineObjOffsetTop = 2;
   
   function createTextAreaWithLines(id, max) {
   		if (!max) {
   			max = 100;
   		}
      var el = document.createElement('DIV');
      var ta = document.getElementById(id);
      ta.parentNode.insertBefore(el,ta);
      el.appendChild(ta);
      
      el.className='textAreaWithLines';
      el.style.width = (ta.offsetWidth + 30) + 'px';
      ta.style.position = 'absolute';
      ta.style.left = '30px';
      el.style.height = (ta.offsetHeight + 2) + 'px';
      el.style.overflow='hidden';
      el.style.position = 'relative';
      el.style.width = (ta.offsetWidth + 30) + 'px';
      var lineObj = document.createElement('DIV');
      lineObj.style.position = 'absolute';
      lineObj.style.top = lineObjOffsetTop + 'px';
      lineObj.style.left = '0px';
      lineObj.style.width = '27px';
      el.insertBefore(lineObj,ta);
      lineObj.style.textAlign = 'right';
      lineObj.className='lineObj';
      var string = '';
      for(var no=1; no<max; no++){
         if(string.length>0)string = string + '<br>';
         string = string + no;
      }
      
      ta.onkeydown = function() { positionLineObj(lineObj,ta); };
      ta.onmousedown = function() { positionLineObj(lineObj,ta); };
      ta.onscroll = function() { positionLineObj(lineObj,ta); };
      ta.onblur = function() { positionLineObj(lineObj,ta); };
      ta.onfocus = function() { positionLineObj(lineObj,ta); };
      ta.onmouseover = function() { positionLineObj(lineObj,ta); };
      lineObj.innerHTML = string;
      
   }
   
   function positionLineObj(obj,ta) {
      obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';   
   }
   
 function editorInsert(input, theText) {
	if (document.selection) {//under IE
		var range = document.selection.createRange();
		range.text = "\t";
	}
	else {
		var start = input.selectionStart;
		var end = input.selectionEnd;
		input.value = input.value.substr(0, start) + theText + input.value.substr(end);
		input.selectionStart = start + theText.length;
		input.selectionEnd = start + theText.length;
		input.focus();
	}
}

$(function () {
	window.parent.$("#if_helper_loading").hide();
});

</script>

</head>
<body>

{{$yield}}

</body>
</html>